import React, {
    Fragment,
    PureComponent
} from 'react';

import {
    View,
    Text,
    Image,
    StyleSheet
} from 'react-native';

import {
    Actions
} from 'react-native-router-flux';

import {
    Input,
    Button,
    AreaCode
} from './../../components';

import * as CONST from '../../const';
import connect from './../../utils/connect';

import userAction from './../../state/actions/user';
import * as userTypes from './../../state/types/user';
import mobile_verify from "./../../images/verify/phone_success.png";

interface State {
    mobile:string,
    areaCode:string,
}

interface Props {
    userActions:any
}

@connect([`user`], {
    userActions: userAction
})
class Mobile extends PureComponent<Props,State> {
    state = {
        mobile:``,
        areaCode:``
    }

    get userActions() {
        const {
            userActions
        } = this.props;
        return userActions;
    }

    get loginUser() {
        const {
            user
        } = this.props;
        const {
            loginUser
        } = user;
        return loginUser || {};
    }

    get mobileVerify() {
        const {
            mobileVerify = 0
        } = this.loginUser;
        return !!mobileVerify;
    }

    get disabled() {
        const {
            mobile,
            areaCode
        } = this.state;
        return !areaCode || !mobile;
    }

    private onSubmit = async () => {
        const {
            mobile,
            areaCode
        } = this.state;

        if(this.disabled) {
            return false
        }

        if(isNaN(mobile as any)) {
            return Tip.warm({
                message:`Mobile Number Error.`
            })
        }

        const _para = {
            mobile:mobile,
            areaCode:areaCode,
            isWithSendCode:true
        }

        Loading.show()

        try {
            const isExist = (
                await this.userActions[
                    userTypes.checkMobile
                ](_para)
            )
            if(isExist) {
                throw {
                    message:`The Mobile already exists.`
                }
            }
            const _query = {
                mobile:mobile,
                source:`verify`,
                areaCode:areaCode,
                onVerify:this.onVerifyMobile
            }
            Actions.push(`/user/send`,_query)
        }
        catch (e) {
            Tip.warm({
                message:e.message
            })
        }
        Loading.close()
    }

    private onVerifyMobile = async (para) => {
        Loading.show();
        try {
            await this.userActions[
                userTypes.userBindMobile
            ](para)
            Tip.success({
                message:`Bind mobile successful.`
            })
        }
        catch (e) {
            Tip.warm({
                message:e.message
            })
        }
        Loading.close();
    }

    private _onAreaCodeChange = (code) => {
        this.setState({
            areaCode:code
        })
    }

    private renderCode = () => {
        return (
            <AreaCode
                onChange={this._onAreaCodeChange}
            />
        )
    }

    private _onChangePhone = (text: any = ``) => {
        text = (
            text.replace(/\s+/g, ``)
        )
        if (isNaN(text)) return false;
        this.setState({
            mobile: text
        })
    }

    render() {
        const {
            mobile
        } = this.state;
        return (
            <View style={styles.container}>
                {this.mobileVerify ? (
                    <View style={styles.verifySuccess}>
                        <Image source={mobile_verify} />
                        <Text style={styles.successText}>
                            Phone verified successfully
                        </Text>
                    </View>
                ):(
                    <Fragment>
                        <Text style={styles.title}>
                            Verify mobile phone to get:
                        </Text>
                        <View style={styles.desc}>
                            <Text style={styles.descText}>
                                1. Phone verification tag
                            </Text>
                        </View>
                        <View style={styles.content}>
                            <Input
                                value={mobile}
                                autoFocus={true}
                                returnKeyType="done"
                                returnKeyLabel="continue"
                                onChange={this._onChangePhone}
                                onSubmitEditing={this.onSubmit}
                                renderLeft={() => this.renderCode()}
                                placeholder="Input Cellphone number"
                            />
                        </View>
                        <Button
                            title="Continue"
                            style={styles.submit}
                            onPress={this.onSubmit}
                            disabled={this.disabled}
                        />
                    </Fragment>
                )}
            </View>
        )
    }
}

export default Mobile;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingVertical: 20,
        paddingHorizontal: 16
    },
    title: {
        fontSize: 16,
        color: `#fff`
    },
    desc: {
        paddingBottom: 16
    },
    content:{
        paddingTop:16
    },
    descText: {
        fontSize: 16,
        color: `#fff`,
        marginTop: 10
    },
    submit: {
        width: 168,
        borderWidth: 1,
        marginTop: 80,
        alignSelf: `center`,
        borderColor: CONST.color,
        backgroundColor: CONST.rgba()
    },
    verifySuccess: {
        flex: 1,
        paddingTop:70,
        alignItems: `center`
    },
    successText: {
        fontSize: 16,
        color: `#fff`,
        marginTop: 16,
        paddingRight: 10
    }
}) as any;